<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#div1 {
	width: 200px;
	height: 200px;
	background-color: blue;
	position: absolute;
	top: 100px;
}

#div2 {
	width: 200px;
	height: 200px;
	background-color: red;
	top: 350px;
	position: absolute;
}
</style>
</head>
<body>
	<button id="b1">div1向右移动</button>
	<button id="b2">div1向左移动</button>
	<button id="b3">div2向右移动</button>
	<button id="b4">div2向左移动</button>
	<div id="div1" style="left: 0;"></div>
	<div id="div2" style="left: 0;"></div>
	<script type="text/javascript">
var b1=document.getElementById('b1');
var b2=document.getElementById('b2');
var b3=document.getElementById('b3');
var b4=document.getElementById('b4');
var div1=document.getElementById('div1');
var div2=document.getElementById('div2');

function move1(speed,target,name,div){
	clearInterval(div.timer);

 div.timer=setInterval(()=>{
		var oldValue=parseInt(div.style[name]);
		var newValue=oldValue+speed;
		if((newValue>=target&&speed>0) || (newValue<=target&&speed<0)){
			newValue=target;
			clearInterval(timer);
			
			}
		div.style[name]=newValue+'px';
		
		},50);
	
	
}

b1.onclick=function start()
 { 
 move1(10,800,'left',div1);
}
b2.onclick=function start()
{
move1(-10,0,'left',div1);
}
b3.onclick=function start()
{ 
move1(10,800,'left',div2);
}
b4.onclick=function start()
{
move1(-10,0,'left',div2);
}

/* function start1(){move(-10,0,'left')}
b2.onclick=start1(); */	
	

</script>
</body>
</html>